import React from 'react';
import CommonList from '../../../components/CommonLists/list';
import { Button, message } from 'antd';
import Modal from '../../../components/Modal/index';
import ScriptEditor from '../../../components/ScriptEditor';
import services from '../../../services/api';

class TacticsEventList extends CommonList {
  constructor(props) {
    super(props);
    this.api = 'event';
    this.tableParams = {
      rowKey: 'event_id',
      scroll: {
        x: 1400,
        y: 500
      }
    };
    this.operatorWidth = 150;
    this.editButton = record => {
      return (
        <Button
          size='small'
          type='link'
          onClick={this.edit.bind(this, record, { title: '编辑事件' })}
          disabled={record.audit_status === this.AUDIT._WAIT}
        >
          编辑
        </Button>
      );
    };
    this.delButton = record => {
      return (
        <Button
          size='small'
          type='link'
          disabled={record.audit_status === this.AUDIT._WAIT}
          onClick={this.delete.bind(this, record)}
        >
          删除
        </Button>
      );
    };
    this.scriptButton = record => {
      return (
        <Button
          size='small'
          type='link'
          onClick={this.editScript.bind(this, record)}
          disabled={record.audit_status === this.AUDIT._WAIT}
        >
          编写脚本
        </Button>
      );
    };
    this.btnGroup = [this.editButton, this.delButton, this.scriptButton];
  }
  componentDidMount() {}

  submitScript = (event_id, value) => {
    const params = {
      event_script: value,
      event_id: event_id
    };
    services.event.editScript(params).then(res => {
      if (res.code === 0) {
        message.success(res.msg);
        this.props.queryList();
        Modal.close();
      }
    });
  };

  getScript = async event_id => {
    return await services.event.getScript({ event_id: event_id });
  };

  editScript = async record => {
    const res = await this.getScript(record.event_id);
    if (res.code === 0) {
      Modal.open({
        title: `编辑代码 - ${record.app_name} / ${record.event_name}`,
        width: 1000,
        content: (
          <div>
            <ScriptEditor
              onSubmit={this.submitScript.bind(this, record.event_id)}
              value={res.data.event_script || ''}
              onCancel={() => Modal.close()}
              placeholder={`事件预处理脚本常于字段的加工处理, 在整个流程的最前面, 脚本语法为QLExpress\n事件预处理脚本中操作的内容即客户端传给风控引擎的所有字段, 存在QLExpress的上下文中\n示例:\n客户端传了 ext_enddate 是一个 yyyy-MM-dd 类型的时间, 需要在脚本中补上小时分钟并将结果赋值给 ext_endtime 字段\next_endtime = ext_enddate + " 00:00:00"`}
            ></ScriptEditor>
          </div>
        ),
        isOkBtn: false,
        isCancelBtn: false,
        ok: () => {},
        cancel: () => {
          Modal.close();
        }
      });
    }
  };

  // 删除时的参数
  getDeleteParam = record => {
    return { event_id: record.event_id };
  };

  refreshTableFilter = params => {
    this.props.refreshTableFilter && this.props.refreshTableFilter(params);
  };
}

export default TacticsEventList;
